// import robots from "./mockdata/robots.json";
import Robot from "./components/Robot";
import logo from "./assets/images/logo.svg"; // react-app已经声明好了
import styles from "./App.module.css"; // 如果没有定义关于css的模块声明,引入的时候会报错
import ShoppingCart from "./components/ShoppingCart";
import { useEffect, useState } from "react";
import RobotDiscount from "./components/RobotDiscount";
import ForfordRefDemo from "./components/ForfordRefDemo";
import UseLayoutEffectDemo from './components/UseLayoutEffectDemo';

function App() {
  // ? 钩子1 useState
  // 这是一种元组的数据结构
  const [count, setCount] = useState<number>(0); // 设置默认值0
  const [robotGallery, setRobotGallery] = useState<any>([]);
  // 使用副作用钩子 如果第二个参数为[] 则模拟componentDidMounted生命周期
  useEffect(() => {
    document.title = `点击${count}`;
    // 相当于count变化 就会触发这个方法一次, setState的第二个参数异步
  }, [count]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setRobotGallery(data));
  }, []);

  return (
    <div className={styles.app}>
      <div className={styles.appHeader}>
        <img src={logo} alt="" className={styles.appLogo} />
        <h1>机器人online购物平台的名字要长</h1>
      </div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        click
      </button>
      <span>count:{count}</span>
      <ShoppingCart />
      <ForfordRefDemo/>
      <UseLayoutEffectDemo/>
      <div className={styles.robotList}>
        {robotGallery.map(
          (r: { id: number; email: string; name: string }, index:number) =>
            index % 2 === 0 ? (
              <RobotDiscount id={r.id} email={r.email} name={r.name} />
            ) : (
              <Robot id={r.id} email={r.email} name={r.name} />
            )
        )}
      </div>
    </div>
  );
}

export default App;
